<template>
	<view class="ordersShipment">
			<view class="ordersShipment-form">
				<view class="ordersShipment-form-item">
					<view class="ordersShipment-form-item-left">
						订单编号
					</view>
					<view class="ordersShipment-form-item-right">
						{{shipmentsData.orderNo}}
					</view>
				</view>	
				<view class="ordersShipment-form-item">
					<view class="ordersShipment-form-item-left">
						客户名称
					</view>
					<view class="ordersShipment-form-item-right">
						{{shipmentsData.buyerCompanyName}}
					</view>
				</view>
				<view class="ordersShipment-form-item" @click="department">
					<view class="ordersShipment-form-item-left">
						出库部门
					</view>
					<view v-if="!departmentItem.name" class="ordersShipment-form-item-right" style="color: #979797;">
						请选择出库部门
						<image src="@/static/image/more_right_icon.png"></image>
					</view>
					<view v-else>{{departmentItem.name}}</view>
				</view>
				<view class="ordersShipment-form-item">
					<view class="ordersShipment-form-item-left">
						发货人
					</view>
					<view class="ordersShipment-form-item-right">
						{{addressData.name ? addressData.name : ''}}
					</view>
				</view>
				<view class="ordersShipment-form-item" @click="addressClick">
					<view class="ordersShipment-form-item-left">
						发货地址
					</view>
					<view v-if="addressData.city">{{addressData.city}} {{addressData.address}}</view>
					<view v-else class="ordersShipment-form-item-right" style="color: #979797;">
						请选择发货地址<image src="@/static/image/more_right_icon.png"></image>
					</view>
				</view>
				<view class="ordersShipment-form-item">
					<view class="ordersShipment-form-item-left">
						联系人
					</view>
					<view class="ordersShipment-form-item-right">
						{{addressData.phone ? addressData.phone : ''}}
					</view>
				</view>
			</view>
			<view class="ordersShipment-titleTag">
				<view class="ordersShipment-icon"></view>发货物品
			</view>
			<view v-for="item,index in shipmentsData.materials" :key="item.id" style="margin-bottom: 3rpx;">
				<view class="deliverGoods">
					<view class="deliverGoods-info">
						<image :src="item.mainImage"></image>
						<view class="deliverGoods-info-text">
							<view class="deliverGoods-info-text-name">{{item.materialShortName}}</view>
							<view>{{item.materialNo}}</view>
							<view>数量：{{item.materialCount}} {{item.materialUnit}}</view>
						</view>
					</view>
					<view class="deliverGoods-logistics">
						<view>查看物流</view>
						<view><input type="number" v-model="item.planOutbound" placeholder="输入数量"/></view>
					</view>	
				</view>
				<view class="deliveryDate">
					<view class="deliveryDate-time">
						<view v-if="item.expectedTime">期望到货时间：{{item.expectedTime.split(' ')[0]}}</view>
						<view class="deliveryDate-time-multiple">
							<text>是否多发</text>
							<image v-if="item.isAllowMore == 0" @click="crinosity('true',item)" src="@/static/image/radio_selected_icon.png"></image>
							<image v-else @click="crinosity('false',item)" src="@/static/image/radio_icon.png"></image>
						</view>
					</view>
					<view class="deliveryDate-remark">
						备注：{{item.remark}}
					</view>
				</view>
			</view>
			
			<view class="deliveryBtn">
				<view>项目信息</view>
			</view>
			
			<view class="submitApplyFo">
				<button type="primary" class="btn" @click="submitApplications">提交申请发货</button>
			</view>
			<popUp :show="popUpShow" @close="batchClose" :shipmentsData="shipmentsData"></popUp>
	</view>
</template>

<script>
	import popUp from '../newsNotification/popUp.vue';
	import * as api from '@/utils/api.js';
	export default {
		components:{
			popUp
		},
		data() {
			return {
				departmentItem:{}, // 出库部门
				isMultiple:false,
				popUpShow:false,
				addressData:{},  // 收货信息
				shipmentsData:{},
			}
		},
		onLoad(option){
			let item = JSON.parse(decodeURIComponent(option.item))
			this.shipmentsData = item
			this.getInit()
		},
		onShow() {
			let pages = getCurrentPages();  
			let nowPage = pages[pages.length - 1];
			let departmentItem = nowPage.data.selectItem
			if(departmentItem){
				this.departmentItem = departmentItem
			}
			
			
			let selected = getApp().globalData.selected;
			if(selected){
				this.addressData = selected
			}
			
			
		},
		methods: {
			getInit(){
				let data = {
					id:this.shipmentsData.salesCompanyId
				}
				api.companyDetail(data).then(res=>{
					if(res.code==0){
						let { contacts } = res.data
						let obj = {}
						contacts.forEach(item=>{
							if(item.type == 1 && item.flag == 0){
								obj = item
							}
						})
						this.addressData = obj
					}
				})
			},
			addressClick(){
				uni.navigateTo({
				    url: '/subcontractList/order/address/index/index?id=' + this.shipmentsData.salesCompanyId
				});
			},
			department(){
				uni.navigateTo({
				    url: '/subcontractList/order/salesAdmin/salesOrder/details/chooseDepartment'
				});
			},
			batchClose(){
				this.popUpShow = false;
			},
			crinosity(type,item){
				if(type == 'false'){
					item.isAllowMore = 0
				}else{
					item.isAllowMore = 1
				}
			},
			submitApplications(){
				let addressData = this.addressData
				let shipmentsData = this.shipmentsData
				let data = {
					salesOrderId:shipmentsData.id,
					sendAddr:addressData.city + addressData.address,
					sendUserName:addressData.name,
					sendUserMobile:addressData.phone,
					materials:[]
				}
				let materials = []
				shipmentsData.materials.forEach(item=>{
					let obj = {}
					obj.id = item.id
					obj.isAllowMore = item.isAllowMore !== null ? item.isAllowMore : 1
					obj.planOutbound = item.planOutbound
					obj.projectLeader = item.projectLeader
					obj.projectLeaderId = item.projectLeaderId
					obj.projectName = item.projectName
					obj.projectNo = item.projectNo
					materials.push(obj)
				})
				
				data.materials = materials
				for (var i = 0; i < data.materials.length; i++) {
					if(!data.materials[i].planOutbound){
						return  uni.showToast({
									title:'请输入数量',
									icon:'none',
									duration: 2000
								});	
					}
				}
				api.submitSendOut(data).then(res=>{
					if(res.code == 0){
						this.popUpShow = true;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.ordersShipment{
		background-color: #eaeaea; 
		min-height: 100vh;
		&-form{
			line-height: 80rpx;
			padding: 10rpx 20rpx;
			background-color: #fff;
			&-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #f3f3f3;
				&-left{
					color: #939393;
				}
				&-right{
					display: flex;
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			&-item:last-child{
				border-bottom: none;
			}
		}
		&-titleTag{
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			margin-top: 20rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #f3f3f3;
			.ordersShipment-icon{
				width: 8rpx;
				height: 30rpx;
				margin: 0 15rpx;
				background-color: #30a875;
			}
		}
		.deliverGoods{
			padding: 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f3f3f3;
			&-info{
				flex: 1;
				display: flex;
				align-items: center;
				image{
					width: 110rpx;
					height: 110rpx;
					margin-right: 15rpx;
				}
				&-text{
					color: #939393;
					font-size: 26rpx;
					&-name{
						font-size: 32rpx;
						color: #272822;
						font-weight: 700;
					}
				}
			}
			&-logistics{
				color: #4c72e3;
				text-align: center;
				input{
					color: #000;
					width: 150rpx;
					border: 2rpx solid #f3f3f3; 
					font-size: 24rpx;
					text-align: center;    
				}
			}
		}
		.deliveryDate{
			color: #939393;
			font-size: 26rpx; 
			background-color: #fff;
			padding: 10rpx 20rpx;
			border-bottom: 2rpx solid #f3f3f3;
			line-height: 50rpx;
			&-time{
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-multiple{
					display: flex;
					align-items: center;
					color: #4c72e3;
					text{
						margin-right: 15rpx;
					}
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
		.deliveryBtn{
			display: flex;
			align-items: center; 
			justify-content: flex-end; 
			padding: 30rpx;
			background-color: #fff;
			view{  
				color: #4c72e3;
				border-radius: 5rpx;
				border: 1rpx solid #4c72e3;
				padding: 10rpx 20rpx;
			}
		}
		
		.submitApplyFo{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			.btn{
				margin:20rpx;
				color: #fff;
				background-color: #4169e1;
			}
		}
	}
</style>
